<div class="content-warp">
  <div class="content-header">
    <i class="anticon anticon-left-circle-o" (click)="goBack()"></i>
    <span class="content-title">编辑抽奖拼团</span>
  </div>
  <div class="content-body">
    <nz-spin [nzSpinning]="_isSpinning">
      <form nz-form [formGroup]="validateForm">
        <div class="content-item">
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" class="item-title">拼团设置</div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>成团人数：</div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('number')">
              <nz-input-number
                [nzDisabled]="stage===2||stage===3"
                formControlName="number"
                [nzMin]="0"
                [nzStep]="1"
                [nzPlaceHolder]="'请输入成团人数'"
                [nzSize]="'large'"></nz-input-number>
              <div nz-form-control class="isNew" [nzValidateStatus]="getFormControl('new_offer')">
                <label nz-checkbox formControlName="new_offer" [nzDisabled]="isNewGroup || disabledNewGroup">
                  <span>是否新人参团</span>
                </label>
              </div>
              <div nz-form-explain
                   *ngIf="getFormControl('number').dirty&&getFormControl('number').hasError('required')">请输入成团人数
              </div>
              <div nz-form-explain *ngIf="getFormControl('number').dirty&&getFormControl('number').hasError('max')">
                成团人数不能超过20人
              </div>
              <div nz-form-explain *ngIf="getFormControl('number').dirty&&getFormControl('number').hasError('min')">
                成团人数不能小于2人
              </div>
              <div nz-form-explain
                   *ngIf="getFormControl('number').dirty&&getFormControl('number').hasError('notInteger')">成团人数必须为整数
              </div>
            </div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>参团价格：</div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('price')">
              <nz-input-number
                [nzDisabled]="stage===2||stage===3"
                formControlName="price"
                [nzMin]="0"
                [nzStep]="1"
                [nzPlaceHolder]="'请输入参团价格'"
                [nzSize]="'large'"></nz-input-number>
              <div nz-form-explain *ngIf="getFormControl('price').dirty&&getFormControl('price').hasError('required')">
                请输入参团价格
              </div>
              <div nz-form-explain
                   *ngIf="getFormControl('price').dirty&&getFormControl('price').hasError('priceToHigh')">参团价格不能高于商品价格
              </div>
              <div nz-form-explain *ngIf="getFormControl('price').dirty&&getFormControl('price').hasError('min')">
                参团价格不能少于0.01
              </div>
              <div nz-form-explain *ngIf="getFormControl('price').dirty&&getFormControl('price').hasError('max')">
                参团价格不能多于99999999
              </div>
            </div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>开团有效期：</div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
              <nz-input [nzSize]="'large'" [nzReadonly]="true" [ngModelOptions]="{standalone: true}"
                        [ngModel]="'24小时'"></nz-input>
              <span class="prompt-info">团长开团后，在此有效期内，若组团失败，团员支付的钱，需退回</span>
            </div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>拼团有效期：</div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('round')">
              <span nz-form-control [nzValidateStatus]="getFormControl('start_date')" class="date-pick-box">
                <nz-datepicker style="width: 100%;" nzShowTime
                               [nzDisabled]="stage===2||stage===3"
                               (ngModelChange)="start_date=$event;_startValueChange()"
                               formControlName="start_date"
                               [nzDisabledDate]="_disabledStartDate"
                               [nzFormat]="'YYYY-MM-DD'"
                               [nzPlaceHolder]="'开始时间'"></nz-datepicker>
                <div nz-form-explain
                     *ngIf="getFormControl('start_date').dirty&&getFormControl('start_date').hasError('required')">请选择拼团开始时间</div>
              </span> <span class="ver-top"> - </span>
              <span nz-form-control [nzValidateStatus]="getFormControl('end_date')" class="date-pick-box">
                <nz-datepicker style="width: 100%;" nzShowTime
                               [nzDisabled]="stage===3"
                               (ngModelChange)="end_date=$event;_endValueChange()"
                               formControlName="end_date"
                               [nzDisabledDate]="_disabledEndDate"
                               [nzFormat]="'YYYY-MM-DD'"
                               [nzPlaceHolder]="'结束时间'"></nz-datepicker>
                <div nz-form-explain
                     *ngIf="getFormControl('end_date').dirty&&getFormControl('end_date').hasError('required')">请选择拼团结束时间</div>
              </span>
            </div>
          </div>

          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>排序：</div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('sorts')">
              <nz-input-number
                formControlName="sorts"
                [nzStep]="1"
                [nzPlaceHolder]="'请输入排序'"
                [nzSize]="'large'"
              >
              </nz-input-number>
              <div nz-form-explain *ngIf="getFormControl('sorts').dirty&&getFormControl('sorts').hasError('required')">
                请输入排序
              </div>
              <div nz-form-explain *ngIf="getFormControl('sorts').dirty&&getFormControl('sorts').hasError('min')">
                不能低于0
              </div>
              <div nz-form-explain *ngIf="getFormControl('sorts').dirty&&getFormControl('sorts').hasError('max')">
                不能超过99
              </div>
              <div nz-form-explain
                   *ngIf="getFormControl('sorts').dirty&&getFormControl('sorts').hasError('notInteger')">请输入整数
              </div>
            </div>
          </div>
        </div>


        <div class="content-item">
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" class="item-title">抽奖设置</div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>抽奖团名称：</div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('name')">
              <div class="p-pr" style="width:300px;">
            					            	<textarea
                                      formControlName="name"
                                      placeholder="请输入抽奖名称"
                                      class="ant-input ng-pristine ng-valid ng-touched ant-input-disabled"
                                      rows="2"
                                      disabled="disabled"
                                      readonly="readonly"
                                      style="width:300px;" maxlength="30"></textarea>
                <div style="position: absolute;right: 8px;bottom: 0px;color: #999;">
                  {{30-(validateForm.controls.name.value?validateForm.controls.name.value.length:0) }}
                </div>
              </div>
            </div>
            <!--<div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('name')">-->
            <!--<nz-input [nzDisabled]="stage===2||stage===3" [nzSize]="'large'" formControlName="name" [nzPlaceHolder]="'请输入抽奖团名称'"></nz-input>-->
            <!--<div nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('required')">请输入抽奖团名称</div>-->
            <!--<div nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('maxlength')">抽奖团名称不能超过30个字</div>-->
            <!--</div>-->
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>单人参与次数：</div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('round')">
              <nz-input-number
                [nzDisabled]="stage===2||stage===3"
                formControlName="round"
                [nzMin]="0"
                [nzStep]="1"
                [nzPlaceHolder]="'请输入单人参与次数'"
                [nzSize]="'large'"></nz-input-number>
              <span class="prompt-info">0表示无上限</span>
              <div nz-form-explain *ngIf="getFormControl('round').dirty&&getFormControl('round').hasError('required')">
                请输入参团次数
              </div>
              <div nz-form-explain *ngIf="getFormControl('round').dirty&&getFormControl('round').hasError('max')">
                参团次数不能大于999
              </div>
            </div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>开奖团数：</div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('min_awards')">
              <nz-input-number
                [nzDisabled]="stage===2||stage===3"
                formControlName="min_awards"
                [nzMin]="0"
                [nzStep]="1"
                [nzPlaceHolder]="'请输入开奖团数'"
                [nzSize]="'large'"></nz-input-number>
              <div nz-form-explain
                   *ngIf="getFormControl('min_awards').dirty&&getFormControl('min_awards').hasError('required')">请输入开奖团数
              </div>
              <div nz-form-explain
                   *ngIf="getFormControl('min_awards').dirty&&getFormControl('min_awards').hasError('max')">
                开奖团数不能大于99999999
              </div>
              <div nz-form-explain
                   *ngIf="getFormControl('min_awards').dirty&&getFormControl('min_awards').hasError('notInteger')">
                开奖团数必须为整数
              </div>
            </div>
          </div>
        </div>
        <div class="content-item">
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" class="item-title">奖品设置</div>
          </div>
          <div *ngFor="let item of prize;let i = index;">
            <div nz-form-item nz-row>
              <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>{{item.class}}设置：</div>
              <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                <div class="init-content" *ngIf="!item.type">
                  <button nz-button [nzType]="'primary'" (click)="addPrize(i)">
                    <span><i class="anticon anticon-plus"></i> 添加商品</span>
                  </button>
                </div>
                <div class="checked-goods-container" *ngIf="!!item.type">
                  <div class="name">
                    <img src="{{item.goods?aliyunOssOutputUrl+'/'+item.goods.first_picture:''}}" alt="">
                    <div>{{item.goods?.name}}</div>
                  </div>
                  <div class="info">
                    <div><span class="title">商品分类</span>
                      <nz-tag [nzColor]="'#fff'" *ngFor="let ite of item.goods?.goods_category">{{ite?.name || ite}}
                      </nz-tag>
                      <span *ngIf="item.goods.goods_category ? !item.goods.goods_category.length : true">无分类</span>
                    </div>
                    <!--<div><span class="title">商品库存</span> <span>{{item.goods?.in_stock || 0}}</span></div>-->
                    <div><span class="title">商品库存</span> <span>{{item.in_stock || 0}}</span></div>
                    <button nz-button *ngIf="stage===1" [nzType]="'primary'" [nzSize]="'large'"
                            class="fr change-goods-btn" (click)="addPrize(i)">
                      <span>更改内容</span>
                    </button>
                  </div>
                </div>
                <span class="delete-prize-btn" *ngIf="i !== 0 && stage===1" (click)="deletePrize(i)"><i
                  class="anticon anticon-close-circle-o"></i></span>
                <div nz-form-explain *ngIf="item.error?.goods">请选择奖品</div>
              </div>
            </div>
            <div nz-form-item nz-row>
              <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>商品属性：</div>
              <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                <nz-radio-group [ngModelOptions]="{standalone: true}" [(ngModel)]="item.checkedSkuId">
                  <label nz-radio [nzValue]="ite.id" *ngFor="let ite of item?.sku"
                         (click)=" disabledNewGroup ? '' : checkedStock(i,ite.in_stock)"
                         [nzDisabled]="stage===2||stage===3">
                    <span>{{ite.name || ite.describe ||  '无规格'}}</span>
                  </label>
                </nz-radio-group>
              </div>
            </div>
            <div nz-form-item nz-row>
              <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>{{item.class}}数量：</div>
              <div nz-form-control nz-col [nzSm]="14" [nzXs]="24"
                   [class.has-error]="item.error['number'] || item.error['toHigh']">
                <nz-input-number
                  [nzDisabled]="stage===2||stage===3"
                  [ngModelOptions]="{standalone: true}"
                  [(ngModel)]="item.number"
                  [nzMin]="0"
                  [nzStep]="1"
                  (ngModelChange)="checkCount($event,i)"
                  [nzSize]="'large'"></nz-input-number>
                <div nz-form-explain *ngIf="item.error?.number">请正确输入奖品数量</div>
                <div nz-form-explain *ngIf="item.error?.toHigh">奖品数量不能大于库存</div>
              </div>
            </div>
          </div>
          <div nz-form-item nz-row *ngIf="stage===1 && prize.length < 5">
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>新增奖项：</div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
              <span class="add-prize-btn" (click)="addAwards(i)"><i
                class="anticon anticon-plus-circle-o"></i> 新增奖项</span>
            </div>
          </div>
          <div nz-form-item nz-row *ngIf="prize.length == 5 && stage===1">
            <p nz-col [nzOffset]="'6'" style="color:#F42121;">最多设置5个奖项</p>
          </div>
        </div>
        <div class="content-item">
          <div nz-form-item nz-row style="margin-bottom:8px;">
            <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
              <button nz-button [nzSize]="'large'" [nzType]="'primary'" (click)="_submitForm()">确 认</button>
              <button nz-button [nzSize]="'large'" [nzType]="'default'" type="button" (click)="goBack();" style="margin-left: 20px">取 消</button>
            </div>
          </div>
        </div>
      </form>
    </nz-spin>
  </div>
</div>
<!-- 添加商品弹窗 start -->

<nz-modal
  [nzVisible]="goodsModalVisible"
  [nzTitle]="'添加商品'"
  [nzWidth]="'700px'"
  [nzContent]="modalContent"
  (nzOnCancel)="goodsModalVisible = false;"
  (nzOnOk)="confirmCheckedGoods()">
  <ng-template #modalContent>
    <div class="operate-line text-right">
      <nz-select
        style="width: 110px;"
        nzAllowClear
        [nzSize]="'large'"
        [nzPlaceHolder]="'请选择分类'"
        [(ngModel)]="selectedGroup"
        [nzShowSearch]="true">
        <nz-option
          *ngFor="let type of groupList"
          [nzLabel]="type.name"
          [nzValue]="type.id">
        </nz-option>
      </nz-select>
      <nz-input name="goodsName" style="width: 200px;" [nzSize]="'large'" [(ngModel)]="keyword"
                [nzPlaceHolder]="'输入商品名称'"></nz-input>
      <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="searchGoods()">
        <span>查 询</span>
      </button>
      <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="reset()">
        <span>重 置</span>
      </button>
    </div>
    <nz-table #nzTable
              [nzAjaxData]="goodsList"
              [nzLoading]="loading"
              [(nzPageIndex)]="page"
              [(nzPageSize)]="pageSize"
              [nzTotal]="total"
              (nzPageIndexChange)="getGoodsList()">
      <thead nz-thead>
      <tr>
        <th nz-th nzCheckbox>
        </th>
        <th nz-th><span>商品</span></th>
        <th nz-th><span>商品库存</span></th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <tr nz-tbody-tr *ngFor="let data of goodsList">
        <td nz-td nzCheckbox>
          <!--<i class="icon iconfont icon-radio-unchecked radio" *ngIf="currentClickGoods['id'] !== data.id" (click)="currentClickGoods = data;"></i>-->
          <!--<i class="icon iconfont icon-radio-checked checked radio" *ngIf="currentClickGoods.id === data.id"></i>-->
          <i class="icon iconfont icon-radio-unchecked radio"
             *ngIf="prize[operatePrizeIndex]['currentClickGoods']['id'] !== data.id" (click)="saveClickGoods(data)"></i>
          <!--<i class="icon iconfont icon-radio-unchecked radio" *ngIf="prize[operatePrizeIndex]['currentClickGoods']['id'] !== data.id" (click)="prize[operatePrizeIndex]['currentClickGoods'] = data"></i>-->
          <i class="icon iconfont icon-radio-checked checked radio"
             *ngIf="prize[operatePrizeIndex]['currentClickGoods']['id'] === data.id"></i>
        </td>
        <td nz-td style="width: 420px;">
          <img class="goods-pic" src="{{aliyunOssOutputUrl+'/'+data.first_picture}}" alt="">
          <div class="goods-info">
            <div class="goods-num">
              <span class="product-id mr-5" *ngIf="data.goods_number">
                <nz-popover [nzTitle]="'商品编号'" *ngIf="data.goods_number.length>1">
                  <span nz-popover>商品编号:{{ data.goods_number[0]+"..." }}</span>
                  <ng-template #nzTemplate>
                    <div style="max-width:300px">
                      <span class="dis-inline" *ngFor="let item2 of  data.goods_number;let i2=index">
                        <span style="display:inline-block;width:">{{item2}}</span><span
                        *ngIf="i2!=data.goods_number.length-1" class="ml-5 mr-5">|</span>
                      </span>
                    </div>
                  </ng-template>
                </nz-popover>
                <span *ngIf="data.goods_number.length==1">
                  商品编号:{{ data.goods_number[0] }}
                </span>
              </span>
              <div class="dis-inline">
                <nz-tag [nzColor]="'#1790FF'" *ngFor="let ite of data.goods_category">{{ite}}</nz-tag>
              </div>
            </div>
            <div class="goods-name">{{data.name}}</div>
          </div>
        </td>
        <!--<td nz-td style="width: 420px;">-->
        <!--<img class="goods-pic" src="{{aliyunOssOutputUrl+'/'+data.first_picture}}" alt="">-->
        <!--<div class="goods-info">-->
        <!--<div class="goods-num">商品编号: {{data.isbn}}-->
        <!--<nz-tag [nzColor]="'#1790FF'" *ngFor="let ite of data.goods_category">{{ite}}</nz-tag>-->
        <!--</div>-->
        <!--<div class="goods-name">{{data.name}}</div>-->
        <!--</div>-->
        <!--</td>-->
        <td nz-td>
          <div style="margin-right: 30px;">
            {{data.in_stock}}
            <nz-progress [ngModel]="50" [nzShowInfo]="false"></nz-progress>
          </div>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </ng-template>
</nz-modal>

<!-- 添加商品弹窗 end -->
